<template>
  <!-- 头部公共组件 -->
  <header id="head_top">
    <slot name="logo"></slot>
      <section class="head_goback" v-if="goBack" @click="$router.go(-1)">
           <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
             <polyline points="12,18,4,9,12,0" style="fill:none;stroke: rgb(255, 255, 255); stroke-width: 2;">
             </polyline>
           </svg>
      </section>
      <router-link :to="userInfo? '/profile' : 'login'" class="head_login" v-if="signinUp">
        <svg class="user_avatar" v-if="userInfo">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#user" ></use>
        </svg>
        <span class="login_span" v-else>登录|注册</span>
      </router-link>
      <section class="title_head ellipsis" v-if="headTitle">
      <span class="title_text">
        {{headTitle}}
      </span>
      </section>
      <slot name="changecity"></slot>
      <slot name="msite-title"></slot>
      <slot name="search"></slot>
      
  </header>
</template>

<script>
  import {  mapActions } from 'vuex';
export default {
  name: 'HeadGroup',
  data () {
    return {
      userInfo: false,
      // headTitle: false,
      // goBack:false
    }
  },
  mounted() {
      this.getUserInfo()
  },
  props: ['signinUp','headTitle', 'goBack'],
  components: {
    // ...mapState(['userInfo'])
  },
  methods: {
    ...mapActions(['getUserInfo'])
  }
}
</script>

<style scoped lang="scss">
   @import '../../style/mixin.scss';
   
   #head_top {
    background-color: $blue;
    position: fixed; // 固定定位
    z-index: 100;
    left: 0;
    top: 0;
    @include wh(100%, 1.95rem);
   }
   .head_goback {
    left: 0.4rem;
    @include wh(0.6rem, 1rem);
    line-height: 2.2rem;
    margin-left: .4rem;
   }
   .head_login {
      right: 0.55rem;
      @include sc(0.65rem, #fff);
      @include ct;
      .login_span {
        color: #fff;
      }
      .user_avatar {
        fill: #fff;
        @include wh(.8rem, .8rem)
      }
   }
   .title_head {
    @include center;
    width: 50%;
    color: #fff;
    text-align: center;
    .title_text {
      @include sc(0.8rem, #fff);
      text-align: center;
      font-weight: bold;
    }
   }
</style>